<template>
  <div>
    <!-- 卡片 -->
    <el-card>
      <!-- form表单 -->
      <el-form  label-width="80px">
        <el-row>
          <el-col :span="6" >
            <el-form-item label="学科名称">
             <el-input v-model="searchOption.subjectName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-button @click="clearOption">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-col>
          <el-col :span="11" class="titleBtn">
             <el-button type="success" icon="el-icon-edit" @click="handerEdit('add')">新增学科</el-button>
          </el-col>
        </el-row>
      </el-form>
      <!-- 记录 -->
      <el-alert
        type="info"
        :title="`共${searchRes.counts}条记录`"
        show-icon>
      </el-alert>
      <!-- 学科列表 -->
      <el-table
      :data="searchRes.items"
      style="width: 100%"
      :row-style="{height:'60px'}">
        <el-table-column
          prop="id"
          label="序号"
          width="70">
        </el-table-column>
        <el-table-column
          prop="subjectName"
          label="学科名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="username"
          label="创建者"
          width="200">
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="创建日期"
          width="200">
        </el-table-column>
        <el-table-column
          prop="isFrontDisplay"
          label="前台是否显示"
          width="180">
          <template slot-scope="{row}">
            {{row.isFrontDisplay===0?'否':'是'}}
          </template>
        </el-table-column>
        <el-table-column
          prop="twoLevelDirectory"
          label="二级目录"
          width="195">
        </el-table-column>
        <el-table-column
          prop="tags"
          label="标签"
          width="195">
        </el-table-column>
        <el-table-column
          prop="totals"
          label="题目数量"
          width="195">
        </el-table-column>
        <el-table-column
          prop="tags"
          label="操作">
          <template slot-scope="{row}">
            <a class="btn" @click="toDirectory(row)">学科分类</a>
            <a class="btn" @click="toTags(row)">学科标签</a>
            <a class="btn" @click="handerEdit('edit', row)">修改</a>
            <a class="btn" @click="handleDelete(row)">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <div class="bottomTool">
        <PageTool :total='searchRes.counts' :paginationPage='searchOption.page' :paginationPagesize='searchOption.pagesize' @pageChange='pageChange' @pageSizeChange='pageSizeChange'>
        </PageTool>
      </div>
    </el-card>
    <!-- 添加或修改弹框 -->
    <subjectAdd ref="subjectAdd" :titleInfo='titleInfo' :formBase='formBase' @newDataes='newDataes'></subjectAdd>
  </div>
</template>

<script>
import moment from 'moment'
import subjectAdd from '@/module-hmmm/components/subjects-add'
import { list, remove } from '@/api/hmmm/subjects.js'/* 学科列表。学科删除 */
import PageTool from '@/module-manage/components/page-tool'
export default {
  data () {
    return {
      // 学科信息
      searchOption: {
        subjectName: '',
        pagesize: 10,
        page: 1
      },
      // 学科列表信息
      searchRes: [],
      titleInfo: '', /* 对话框标题 */
      // 新增学科临时数据
      formBase: {
        id: '',
        subjectName: '',
        isFrontDisplay: false
      }
    }
  },
  components: { PageTool, subjectAdd },
  // 页面一开始渲染
  async created () {
    this.getSearchOption()
  },
  methods: {
    // 获取学科列表数据
    async getSearchOption () {
      const { data } = await list(this.searchOption)
      // 处理时间
      data.items.forEach(item => { item.addDate = moment(item.addDate).format('YYYY-MM-DD HH:mm:ss') })
      this.searchRes = data
    },
    // 搜索清除
    clearOption () {
      this.searchOption = {
        subjectName: '',
        pagesize: 10,
        page: 1
      }
    },
    // 搜索
    search () {
      this.getSearchOption()
    },
    pageChange (id) {
      this.searchOption.page = id
      this.getSearchOption()
    },
    pageSizeChange (id) {
      this.searchOption.pagesize = id
      this.getSearchOption()
    },
    // 新增或修该学科
    handerEdit (type, value) {
      // 草稿
      this.formBase = {
        id: '',
        subjectName: '',
        isFrontDisplay: false
      }
      // 判断
      if (type === 'add') {
        // 新增
        this.titleInfo = '新增学科'
        this.$refs.subjectAdd.dialogFormV()/* 显示弹框 */
      } else if (type === 'edit') {
        // 编辑
        this.titleInfo = '编辑学科'
        this.formBase.id = value.id
        this.formBase.subjectName = value.subjectName
        this.formBase.isFrontDisplay = value.isFrontDisplay !== 0
        this.$refs.subjectAdd.dialogFormV()/* 显示弹框 */
      }
    },
    // 更新
    newDataes () {
      this.getSearchOption()
    },
    // 删除学科
    handleDelete (row) {
      // 警示框
      this.$confirm('此操作将删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 成功删除
        await remove({ id: row.id })
        this.$message({
          type: 'success',
          message: '成功!'
        })
        this.getSearchOption()
      }).catch(() => {
        // 失败取消
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    // 编程式导航学科分类，传参id,name
    toDirectory (row) {
      this.$router.push({
        path: '/subjects/directorys',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 编程式导航学科标签，传参id,name
    toTags (row) {
      this.$router.push({
        path: '/subjects/tags',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    }

  }
}
</script>

<style scoped lang='less'>
.el-select{
  display: block;
}
.titleBtn{
  position: relative;
  .el-button{
    position: absolute;
    right: 0;
  }
}
  .bottomTool{
    margin: 20px 0;
    float: right;
  }
.btn{
  color: #66b1ff;
  margin-left: 8px;
  font-size: 16px;
}
</style>
